<template>
  <!-- 表单搜索组件 -->
  <el-form ref="refForm" :inline="true" :model="form" class="form">
    <el-form-item prop="name" label="姓名：">
      <el-input v-model="form.name" placeholder="请输入姓名模糊查询"></el-input>
    </el-form-item>
    <el-form-item prop="phone" label="电话号码：">
      <el-input v-model="form.phone" placeholder="输入完整电话号码查询"></el-input>
    </el-form-item>
    <el-form-item style="float: right;">
      <el-button @click="resetForm()">清除</el-button>
      <el-button type="primary" @click="handleSearch">查询</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name:'search',
  data() {
    return {
      form: {
        name: '',
        phone: ''
      }
    }
  },
  methods: {
    handleSearch() {
      this.$emit('handleSearch', this.form)
    },
    resetForm() {
      this.$refs['refForm'].resetFields();
      this.$emit('handleSearch', this.form)
    }
  }
}
</script>
<style scoped lang="less">
:deep(.el-form-item) {
  margin-bottom: 0;
}

:deep(.el-input) {
  height: 40px;
  display: flex;
  align-items: center;
}
:deep(.el-form-item__content){
line-height: 36px;
}
:deep(.el-form-item__label) {
  font-size: 9px;
  padding-right: 0px;
}

:deep(.el-input__inner) {
  font-size: 9px;
  height: 20px;
}

:deep(.el-button) {
  height: 18px;
  line-height: 17px;
  text-align: center;
  padding: 0 10px;
  font-size: 9px;
  border-radius: 3px;
}

:deep(.el-button--default) {
  color: #d8a764;
  background-color: #fff;
  border-color: #d8a764;
}

:deep(.el-button--primary) {
  background-color: #d8a764;
  border-color: #d8a764;
}</style>